<#include "../common/layoutWithOutDocType.ftl"/>
<@layoutWithOutDocType>
<div class="well">
<!--百度地图容器-->
  	<div>
  		<input class="input-xlarge focused" id="searchValue" type="text"  style="height: 26">
  		<button type="button" class="btn btn-primary" onclick="search()">搜 索</button>
  	</div>
  	<div id="container"></div>
  	<div id="results"></div>
<style type="text/css"> 
#container{height:95%}
</style> 
<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3&services=true"></script>
<script type="text/javascript" src="/js/baiduMap/MarkerTool.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script>

	 
	//创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        initAllMarker();//初始化数据库中已有的标点
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("container");//在百度地图容器中创建一个地图
		var point = new BMap.Point(104.067923,30.679943);//定义一个中心点坐标 <成都>
        map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
	    //向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
	    //向地图中添加缩略图控件
		var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
		map.addControl(ctrl_ove);
	    //向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
    }
    
    
     //初始化数据库中已有的标点
    function initAllMarker(){
   		<#list list as driver>
	    	var point = new BMap.Point(${driver.longitude?string(",##0.000000")},${driver.latitude?string(",##0.000000")});
			//创建一个标点
			var marker = new BMap.Marker(point);
			//标点右下角显示的LABEL
			var dataLabel = new BMap.Label('${driver.name!""}', {offset: new BMap.Size(13, 23)});
		    dataLabel.setStyle({border: "solid 1px green",backgroundColor:"white"});
			var dataIcon= new BMap.Icon(
			<#if driver.status == 0>
			'/img/marker/marker_green.png', 
			<#elseif driver.status == 1>
			'/img/marker/marker_blue.png', 
			<#elseif driver.status == 2>
			'/img/marker/marker_red.png', 
			<#elseif driver.status == 3>
			'/img/marker/marker_purple.png', 
			<#elseif driver.status == 4>
			'/img/marker/marker_pink.png', 
			<#else>
			'/img/marker/marker_yellow.png', 
			</#if>
			new BMap.Size(39, 25), {
    			imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  			}
			);
		    //设置标点图标
			marker.setIcon(dataIcon);			    
			//设置标点LABEL
			marker.setLabel(dataLabel);
			//设置标点TITLE
			//marker.setTitle(dataTitle);
			marker.addEventListener("mouseover", function(){
			    var content = "<table><tr><td rowspan=5>"
				content += "<img width=70 src='/upload/${driver.head!"default_avatar.gif"}'></td>";
				content += "<td>姓名：${driver.name}</td>";
		    	content += "<tr><td>电话：${driver.phone}</td></tr>";
		    	content += "<tr><td>驾照：${driver.driver_license}</td></tr>";
		    	content += "<tr><td>";
		    	var sex = ${driver.sex} ;
		    	if(sex == 0 ){
			    	content += "性别：男<br>";
		    	}
		    	else if(sex == 1){
		    		content += "性别：女<br>";
		    	}
		    	else{
		    		content += "性别：未知<br>";
		    	}
		    	content += "</td></tr>";
		    	content += "<tr><td>年龄：${driver.age}</td></tr>";
		    	content += "</table>";
				var infoWindow = new BMap.InfoWindow(content);
				this.openInfoWindow(infoWindow);
			});
			
			//在地图上打点
			map.addOverlay(marker);
			//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		</#list>
		
    }
    
    
    initMap();
    
     function search(){
	 	var local = new BMap.LocalSearch(map, {
		  renderOptions: {map: map, panel: "results"}
		});
		
		local.search($("#searchValue").val());
			 	
	 }
</script>
</div>


          
</@layoutWithOutDocType>